<template>
  <div class="divBox">
    <el-card class="box-card">
      <div style="font-size: 20px;font-weight: 600;text-align: center;margin: 30px ;">
        {{ this.$route.meta.title }}
      </div>
      <el-form size="small" v-loading="loading" style="padding: 15px;" label-width="auto" ref="tableData" :rules="dataRules"
        :model="tableData">
        <el-form-item label="快递公司" prop="kd">
          <el-select v-model="tableData.kd" placeholder="请选择快递公司">
            <el-option label="快递公司" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="寄方" prop="jf">
              <el-input size="small" v-model="tableData.jf" placeholder="">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="收方" prop="sf">
              <el-input size="small" v-model="tableData.sf" placeholder="">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="预约取件" prop="jf">
              <el-input size="small" v-model="tableData.jf" placeholder="">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="取件员" prop="sf">
              <el-input size="small" v-model="tableData.sf" placeholder="">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="单据号" prop="jf">
              <el-input size="small" v-model="tableData.jf" placeholder="">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-table ref="tableData" v-loading="loading" :data="tableData.list" highlight-current-row max-height="400px"
        :header-cell-style="$cssStyle.tabHeaderStyle" :cell-style="$cssStyle.tabRowStyle">

          <el-table-column label="序号" type="index" width="50px"></el-table-column>
          <el-table-column label="物品名称" prop="name" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="件数" prop="name" show-overflow-tooltip></el-table-column>
          <el-table-column label="物品重量" prop="name" show-overflow-tooltip></el-table-column>
          <el-table-column label="体积" prop="name" show-overflow-tooltip></el-table-column>
          <el-table-column label="价保" prop="name" show-overflow-tooltip></el-table-column>
          <el-table-column label="增值费用" prop="name" show-overflow-tooltip></el-table-column>
          <el-table-column label="用户费用合计" prop="name" show-overflow-tooltip></el-table-column>
          <el-table-column label="承运商费用" prop="name" show-overflow-tooltip></el-table-column>
          <el-table-column width="50px">
            <template slot="header">
              <el-tooltip effect="dark" content="添加行" placement="top">
                <el-button :disabled="disabled" icon="el-icon-plus" circle style=" background-color: rgba(255, 240, 214, 1); "
                  @click="newLine"></el-button>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="删除行" placement="top">
              <el-button :disabled="disabled" type="danger" icon="el-icon-close" size="mini" circle
                @click="deleteLine(scope.$index, scope)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item style="margin-top: 15px; right">
          <el-button :loading="loading" type="primary"
            style="background-color: rgba(255, 195, 0, 1);border-color:rgba(255, 195, 0, 1);"
            @click="getTableList">提交订单</el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
export default {
  name: "BillDetail",
  data() {
    return {
      //获取定义的常量
      constants: this.$constants,
      //表格数据
      tableData: { list: [] },
      //行数据
      tableRow: {
        name: '静态页面',
      },
      //提交参数
      listPram: {
        keyWord: null,
        page: 1,
        limit: this.$constants.page.limit[0],
      },
      loading: false,
      dataRules: {},
      //是否可以写入
      disabled: false,

    }
  },
  created() {
    this.resetGrid();
    //this.type = parseInt(this.$route.params.type);
    //this.listPram.type = parseInt(this.$route.params.type)
  },
  mounted() {
  },
  methods: {
    //重置
    resetGrid() {
      this.tableData.list = []
      for (let index = 0; index < 5; index++) {
        this.newLine()
      }
    },
    //获取表格分页数据
    getTableList() {
      /*
      this.loading = true      
      roleApi.roleGetPageList(this.listPram).then(res => {
        this.listData = res.data
        this.loading = false
      }).catch((err) => {
        this.loading = false
        this.$message.error(err.msg)
      })
      */
    },
    //添加行
    newLine() {
      this.tableData.list.push(JSON.parse(JSON.stringify(this.tableRow)))
      //this.tableData.push(this.tableRow)

    },
    //删除行
    deleteLine(index, scope) {
      console.log(scope)
      this.tableData.list.splice(index, 1)
    },
  }
}
</script>

<style scoped>

</style>
